<template>
  <q-card>
    <q-card-section>
      <div class="row">
        <div class="fal col-5">Contractor's Liability? :</div>
        <div class="q-pa-sm">
          <div class="q-gutter-sm">
            <q-radio
              v-model="form.form2.contractor_liability"
              val="N"
              label="no"
              color="primary"
              disable
            />
            <q-radio
              v-model="form.form2.contractor_liability"
              val="Y"
              label="yes"
              color="primary"
              disable
            />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="fal col-5">DLC Form No. :</div>
        <div class="q-pa-sm col-7">
          <div class="q-gutter-sm">
            <q-input
              class="input-css readonly"
              v-model="form.form2.dlc_no"
              :dense="true"
              readonly
            />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="fal col-5">Name by Designated person :</div>
        <div class="q-pa-sm col-7">
          <div class="q-gutter-sm">
            <q-input
              class="input-css readonly"
              readonly
              v-model="form.form2.designated_person_name"
              :dense="true"
            />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="fal col-5">Date :</div>
        <div class="q-pa-sm col-7">
          <div class="q-gutter-sm">
            <div style="max-width: 300px">
              <q-input class="input-css readonly" v-model="form.form2.date" readonly dense>
                <template v-slot:append >
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    @click="datePopup = true"
                    
                  >
                  </q-icon>
                </template>
              </q-input>
            </div>
            <q-dialog  v-model="datePopup">
              <div class="q-pa-md">
                <div class="q-gutter-md row items-start">
                  <q-date
                  mask="YYYY-MM-DD"
                    v-model="form.form2.date"
                    minimal
                    readonly
                    @update:model-value="datePopup = false"
                  />
                </div>
              </div>
            </q-dialog>
          </div>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { getOrderDetailLabel2Data } from 'src/services/repairService';
import { useCheckinStore } from 'src/stores/checkinStore';
import { onMounted, reactive, ref } from 'vue';
const props = defineProps<{
  orderId: number;
}>();
const datePopup = ref(false);

const form = reactive<{
  form2: {
    contractor_liability: string;
    dlc_no: string;
    designated_person_name: string;
    date: string;
  };
}>({
  form2: {
    contractor_liability: '',
    dlc_no: '',
    designated_person_name: '',
    date: '',
  },
});

async function init(){
  
  const res = await getOrderDetailLabel2Data(props.orderId)
  if(res.data){
    form.form2 = res.data    
  }
}
init()
</script>

<style scoped>
.now-parent {
  border-top: 1px solid #000;
  padding: 0;
}
.now-child {
  padding: 0.5rem;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  background-color: #d9d9d9;
}
.c-status-field {
  font-size: 20px;
  font-weight: 700;
  width: auto;
}
</style>
